<template>
	<div id="system">
		<el-form :model="sform" label-width="auto">
			<el-row>
				<el-col :span="12">
					<el-form-item label="创建帐号" prop="root">
						<el-input v-model="sform.root" placeholder="请创建帐号" clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="创建密码" prop="pwd">
						<el-input
							v-model="sform.pwd"
							placeholder="请输入6-8位字符"
							maxlength="8"
							minLength="6"
							clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="确认密码" prop="pwd2">
						<el-input
							v-model="sform.pwd2"
							placeholder="请输入6-8位字符"
							maxlength="8"
							minLength="6"
							clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="帐号权限" prop="accType">
						<el-select
							v-model="sform.accType"
							clearable
							placeholder="请选择"
							style="width: 240px">
							<el-option
								v-for="item in accData"
								:key="item.id"
								:label="item.name"
								:value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="使用人" prop="user">
						<el-input
							v-model="sform.user"
							placeholder="此帐号使用人"
							maxlength="4"
							minLength="2"
							clearable />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="注册码" prop="code">
						<el-input
							v-model="sform.code"
							placeholder="注册码在数据库"
							maxlength="12"
							minLength="6"
							show-password
							clearable />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-row style="padding-top: 1.5rem; text-align: center">
			<el-col :span="24">
				<el-button @click="register">创 建</el-button>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
	import { reactive } from "vue";
	import { addObj } from "@/api";
	import { ElMessage } from "element-plus";

	const sform = reactive({
		root: "",
		pwd: "",
		pwd2: "",
		accType: "3",
		user: "",
		code: "",
	});
	const accData = reactive([
		{ name: "操作员", id: "2" },
		{ name: "查询员", id: "3" },
	]);

	const register = () => {
		if (sform.pwd !== sform.pwd2) {
			return ElMessage.error("两次输入密码不一致！");
		}
		addObj("/register", sform).then((res) => {
			console.log(res, 99);
		});
	};
</script>

<style lang="scss" scoped></style>
